<template>
  <div class="user-data-box">
    <div style="width:100%;font-size: 20px;margin-bottom:40px;">
      <span style="float:left;">用户数据统计</span> <i style="float:right; color:#bfbfbf;cursor: pointer;"
        @click="handlerClose" class="el-icon-error"></i>
    </div>
    <div ref="chart" style="width:100%;height:100%"></div>
  </div>
</template> 

<script>
import LOCAL from '@/main'
export default {
  data() {
    return {
      LOCAL
    }
  },
  methods: {
    handlerClose() {
      this.$emit('close');
    },
    getEchartData() {
      const data = this.genData();
      var chart = this.$refs.chart
      if (chart) {
        // console.log(LOCAL.   );
        let myChart = this.$echarts.init(chart);
        const option = {
          textStyle: {
            color: '#000000',
            fontFamily: 'Microsoft YaHei',
            fontSize: 10,
            fontStyle: 'normal',
            fontWeight: 'normal',
          },
          color: ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'],
          title: {
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {

            type: 'scroll',
            orient: 'vertical',
            right: 0,
            top: 0,
            bottom: 30,
            // data: data.legendData
          },
          series: [
            {
              name: '省份',
              type: 'pie',
              radius: '55%',
              bottom: '30',

              center: ['35%', '50%'],
              data: data.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        // window.addEventListener("resize", function () {
        //   myChart.resize();
        // });
        // this.$on('hook:destroyed', () => {
        //   window.removeEventListener("resize", function () {
        //     myChart.resize();
        //   });
        // });
      }
    },
    genData() {
      const seriesData = [];
      const legendData = [
        '北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏',
        '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西',
        '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '西藏', '宁夏', '新疆',
        '台湾', '香港', '澳门'
      ];

      for (var i = 0; i < legendData.length; i++) {
        seriesData.push({
          name: legendData[i],
          value: Math.round(Math.random() * 10000)
        });
      }
      return {
        legendData,
        seriesData
      }
    }
  },
  mounted() {
    this.getEchartData();
  }
}
</script>

<style scoped>
.user-data-box {
  position: absolute;
  top: 40px;
  left: 10px;
  border-radius: 10px;
  width: 350px;
  height: 220px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 145, 255, 0.3);

}
</style>